<template>
  <div>
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <div class="table-content">
        <el-form :model="formInline" :rules="rules" ref="formInline" label-width="100px">
          <el-form-item label="学科：" prop="subjectID">
            <el-select v-model="formInline.subjectID" placeholder="请选择" @change="getOtherList">
              <el-option
                v-for="(item, index) in subList"
                :key="index"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录：" prop="catalogID">
            <el-select v-model="formInline.catalogID" placeholder="请选择">
              <el-option
                v-for="(item, index) in direcList"
                :key="index"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 企业 -->
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select v-model="formInline.enterpriseID" placeholder="请选择">
              <el-option
                v-for="(item, index) in enpList"
                :key="index"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 城市 -->
          <el-form-item label="城市：" prop="province">
            <el-select
              style="width: 48%; margin-right: 4%;"
              v-model="formInline.province"
              placeholder="请选择"
              @change="changeFn"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select style="width: 48%" v-model="formInline.city" placeholder="请选择">
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 方向 -->
          <el-form-item label="方向：" prop="direction">
            <el-select v-model="formInline.direction" placeholder="请选择">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <!-- 题型 -->
          <el-form-item label="题型：" prop="questionType">
            <el-radio-group v-model="formInline.questionType" @change="changeLayout">
              <el-radio :label="'1'">单选</el-radio>
              <el-radio :label="'2'">多选</el-radio>
              <el-radio :label="'3'">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 难度 -->
          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="formInline.difficulty">
              <el-radio :label="'1'">简单</el-radio>
              <el-radio :label="'2'">一般</el-radio>
              <el-radio :label="'3'">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 题干 -->
          <el-form-item label="题干：" prop="question">
            <quill-editor
              v-model="formInline.question"
              ref="myQuillEditor"
              :options="editorOption"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="选项：" prop="options">
            <!-- 单选 -->
            <SingleOption
              v-if="isShowOption==='1'"
              @passOption="passOption"
              :resetData="resetData"
              :optionId="id"
            ></SingleOption>
            <!-- 多选 -->
            <MultiOption
              v-if="isShowOption==='2'"
              @passOption="passOption"
              :resetData="resetData"
              :optionId="id"
            ></MultiOption>
          </el-form-item>
          <!-- 解析视频 -->
          <el-form-item label="解析视频：" prop="videoURL">
            <el-input v-model="formInline.videoURL"></el-input>
          </el-form-item>
          <!-- 答案解析 -->
          <el-form-item label="答案解析：" prop="answer">
            <quill-editor
              v-model="formInline.answer"
              ref="myQuillEditor"
              :options="editorOption"
            ></quill-editor>
            <!-- <el-input v-model="artForm.articleBody"></el-input> -->
          </el-form-item>
          <!-- 题目备注 -->
          <el-form-item label="题目备注：" prop="remarks">
            <el-input type="textarea" v-model="formInline.remarks">
            </el-input>
          </el-form-item>
          <!-- 标签 -->
          <el-form-item label="试题标签：" prop="tags">
            <el-select v-model="formInline.tags" placeholder="请选择">
              <el-option
                v-for="(item, index) in tagList"
                :key="index"
                :label="item.tagName"
                :value="item.tagName"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" v-if="!id" @click="uploadQuest">确认提交</el-button>
            <el-button type="success" v-else @click="updateData">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSubjectList, getCatalogueList, getLabelList } from '@/api/subjectmanage'
import { provinces, citys } from '@/api/citys'
import { getEnterpriseList } from '@/api/enterprise'
import { quillEditor } from "vue-quill-editor"
import { getQuestDetail, addNewQuest, updateDetail } from '@/api/querstionbank'
import SingleOption from './components/singleOption.vue'
import MultiOption from './components/multiOption.vue'
export default {
  name: 'TestEntry',
  components: {
    quillEditor,
    SingleOption,
    MultiOption
  },
  data() {
    return {
      loading: false,
      returnOption: [],
      resetData: false,
      isShowOption: '1',
      choosed: 0,
      provincesList: provinces(), // 城市
      citysList: [], // 地区
      subList: [],
      direcList: [],
      enpList: [],
      tagList: [],
      id: this.$route.query.id || null,

      formInline: {
        subjectID: null,
        questionType: '1',
        difficulty: '1',
        province: '',
        city: '',
        remarks: '',
        direction: '',
        enterpriseID: null,
        catalogID: null,
        tags: '',
        question: '',
        videoURL: '',
        answer: '',
        options: [],
      },
      rules: {
        subjectID: { required: true, trigger: 'blur' },
        questionType: { required: true, trigger: 'blur' },
        difficulty: { required: true, trigger: 'blur' },
        province: { required: true, trigger: 'blur' },
        city: { required: true, trigger: 'blur' },
        remarks: [],
        direction: { required: true, trigger: 'blur' },
        enterpriseID: { required: true, trigger: 'blur' },
        catalogID: { required: true, trigger: 'blur' },
        tags: [],
        question: { required: true, trigger: 'blur' },
        videoURL: [],
        answer: { required: true, trigger: 'blur' },
        options: [],
      },
      editorOption: {
        placeholder: "请输入...",
        modules: {
           toolbar:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'],     //引用，代码块

              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表

              ['link', 'image']    //上传图片、上传视频
            ]
         }
      }
    }
  },

  methods: {
    resetForm() {
      this.$refs.formInline.resetFields();
    },
     // 获取学科列表
    async getSubList() {
      const res = await getSubjectList({page: 1, pagesize: 999})
      this.subList = res.items
    },
    getOtherList() {
      this.getCatList()
      this.getLabList()
    },
    async getCatList() {
      const res = await getCatalogueList({page: 1, pagesize: 999, subjectID: this.formInline.subjectID})
      this.direcList = res.items
    },
    async getLabList() {
      const res = await getLabelList({page: 1, pagesize: 999, subjectID: this.formInline.subjectID})
      this.tagList = res.items
    },
    changeFn () {
      // 获取地区赋值给本地
      this.citysList = citys(this.formInline.province)
    },
    // 获取企业列表
    async getEntList() {
      const res = await getEnterpriseList({page: 1, pagesize: 999})
      this.enpList = res.items
    },
    // 根据题型更改布局
    changeLayout() {
      if(this.formInline.questionType === '1'){
        this.isShowOption = '1'
      }else if(this.formInline.questionType === '2'){
        this.isShowOption = '2'
      }else{
        this.isShowOption = '3'
      }
    },
    // 获取题目详情
    async getDeatil(id) {
      this.loading = true
      const res = await getQuestDetail(id)
      console.log(res)
      if(typeof res === 'object'){
        this.formInline = res
        this.isShowOption = res.questionType
        this.returnOption = res.options
        this.loading = false
      }else {
        this.loading = false
        this.$message.error('数据出错，请重新选择题目！')
        this.$router.back()
      }
    },
    passOption(arr) {
      this.formInline.options = arr
    },
    // 上传题目
    async uploadQuest() {
      this.loading = true
      const res = await addNewQuest(this.formInline)
      if(res) {
        this.loading = false
        this.resetData = true
        this.resetForm()
        this.$message({
          message: '添加成功！',
          type: 'success'
        })
        this.$router.push('/questionbank/baseqb')
      }
    },
    async updateData() {
      this.loading = true
      const res = await updateDetail(this.id, this.formInline)
      if(res) {
        this.loading = false
        this.resetData = true
        this.resetForm()
        this.$message({
          message: '添加成功！',
          type: 'success'
        })
        this.$router.push('/questionbank/baseqb')
      }
    }
  },
  created() {
    this.getSubList()
    this.getEntList()
    if (this.id) {
      this.getDeatil(this.id)
    }
  },
  computed: {
    editor() {
      // false禁止编辑  true语序编辑
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
::v-deep .el-card__body{
  padding-left: 50px;
  width: 650px;
}

::v-deep .el-select{
  width: 100%;
}

::v-deep .ql-editor{
  height: 180px;
}

::v-deep el-textarea{
  min-height: 90px!important;
}
</style>
